<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>验证码</title>
    <style>
        .block{
            width: 100px;
            height: 40px;

            border: 1px solid grey;
            position: relative;
            top: 20px;
            left: 600px;
            background-color:#ffffff;
            background-size: 100%;
            overflow: hidden;
        }
        #look{
            float: left;
            color: black;
            font-size: 20px;
            position: relative;
            cursor: pointer;
            top: -10px;
            left: 700px;
        }
        #count{
            position: relative;
            top: -6px;
            left: 590px;
        }
        .num{
            display: inline-block;
            line-height: 40px;
            width: 20px;
            text-align: center;


        }
        #btn{
            position: relative;
            top: -6px;
            left: 586px;
        }
    </style>
</head>

<body>
<div>
    <div class="block"></div><!--验证码显示区域  需要注意此区域不能复制！-->
    <span id="look">看不清</span><!--防止无法辨识的情况，点击随机生成验证码-->
    <div style="clear: both;"><!--用于清除浮动-->
        <input type="text" id="count"><!--用户输入栏，将验证码输入在此，且不区分大小写-->
        <button id="btn">验证</button><!--点击是比较值，验证成功提示成功，失败提示失败且再次随机生成验证码-->
    </div>
</div>
<script>
    var block = document.getElementsByClassName('block')[0];
    document.onselectstart=function (){
        return false;//禁止选择开始
        //   建议还是用样式来禁用复制
    }
    var res;
    showdata();

    function showdata() {
        res = ''; //比较值的数组
        var ele = ''; //拼接值的数组  重新调用时，将值附空
        for (var i = 0; i < 4; i++) {//产生4位验证码
            if (Math.random() > 0.33) {//产生数字验证码的概率为33%
                var number = Math.floor(Math.random() * 10);//Math.random 为0~1且不为1的随机数，*10后向下取整为0~9的随机数
                res += number;
                ele += "<span class='num' style='transform: rotate(" + Math.floor((Math.random() - 0.5) * 80) +"deg); font-size:" + (Math.floor(Math.random() * 8) + 12) + "px; color:rgb(" + Math.floor(Math.random() *256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) +"); '>" + number + "</span>";
                // 字符串拼接
            } else if (Math.random() > 0.33 && Math.random() < 0.8) {//关于调用的Math.random() 由于是每次调用都会重新产生新的随机数，所以它的值不为固定值。
                // 也就是说，上行代码可以换做  Math.random()<0.46   由于它不是固定值，所以它只表示概率！！！
                var number = (97 + Math.floor(Math.random() * 26));
                var str = ""; //需要转化为字符
                if (Math.random > 0.5) {
                    str = String.fromCharCode(number).toUpperCase(); //小写
                } else {
                    str = String.fromCharCode(number).toUpperCase(); //大写
                }
                res += str;
                ele += "<span class='num' style='transform: rotate(" + Math.floor((Math.random() - 0.5) * 80) +
                "deg); font-size:" + (Math.floor(Math.random() * 8) + 12) + "px; color:rgb(" + Math.floor(Math.random() *
                256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) +
                "); '>" + str + "</span>";
            } else {
                var str_new = "5201314";//可以找一段自己喜欢的文字，用来充当文字库
                var index=Math.floor(Math.random()*str_new.length);
                ele += "<span class='num' style='transform: rotate(" + Math.floor((Math.random() - 0.5) * 80) + "deg); font-size:" + (Math.floor(Math.random() * 8) + 12) + "px; color:rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "); '>" + str_new.charAt(index) + "</span>";
                res+=str_new.charAt(index);
            }


        }
        block.innerHTML = ele;//将拼接的内容赋给block 实现验证码的显示
    }
    //  看不清
    var look = document.getElementById('look');
    look.onclick = function () {
        showdata();//重新调用即可实现重新生成验证码
    }
    //  验证按钮
    var btn = document.getElementById('btn');
    var count = document.getElementById('count');
    btn.onclick = function () {
        if (count.value.toLowerCase() == res.toLowerCase()) {
            alert('验证成功');
            // 弹窗
        } else {
            alert('验证失败');
            showdata();
            // 重新调用，实现实现重新生成验证码
            count.value = '';
            //将之前的文本框内容清空
        }
    }
</script>


</body>

</html>